<%@ taglib prefix="fns" uri="http://java.sun.com/jsp/jstl/functionss" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <%@include file="/WEB-INF/views/common/header.jsp" %>
    <link rel="stylesheet" type="text/css" href="/static/css/simple-calendar.css">
    <link rel="stylesheet" type="text/css" href="/static/css/jquery.dataTables.css"/>

    <script type="text/javascript" src="/static/js/simple-calendar.js"></script>
    <script type="text/javascript" src="/static/js/jquery.dataTables.js"></script>
    <title>分配兼职人员</title>
</head>
<body>
<%@include file="/WEB-INF/views/common/top.jsp" %>
<%@include file="/WEB-INF/views/common/nav.jsp" %>

<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
    <div class="show-top-grids">
        <div class="main-grids about-main-grids">
            <h4>分配兼职人员</h4>
            <div class="recommended-info" pane="">
                <hr class="layui-bg-green">

                <table class="layui-table">
                    <tr>
                        <td style="text-align:center;">${part.companyName}：${part.title}</td>
                    </tr>
                    <tr>
                        <td>
                            <span class="allocation"><em class="glyphicon glyphicon-usd"
                                                         aria-hidden="true"></em><span> ${part.salary}元/人/天</span></span>
                            <span class="allocation"><em class="glyphicon glyphicon-user"
                                                         aria-hidden="true"></em><span> ${part.peopleNumber}人/天</span></span>
                            <span class="allocation"><em class="glyphicon glyphicon-exclamation-sign"
                                                         aria-hidden="true"></em><span> ${part.partType.partTypeName}</span></span>
                            <span class="allocation"><em class="glyphicon glyphicon-time"
                                                         aria-hidden="true"></em><span> ${part.startTimeStr} - ${part.endTimeStr}</span></span>
                            <span class="allocation"><em class="glyphicon glyphicon-road"
                                                         aria-hidden="true"></em>
                                <span> ${part.province} - ${part.city} - ${part.town} - ${part.road} - ${part.address}</span>
                            </span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <p> 职位详情：<br/>
                                ${part.detail}
                            </p>
                        </td>
                    </tr>
                </table>

                <div class="layui-tab">
                    <ul class="layui-tab-title">
                        <li class="layui-this">粗力度日期分配</li>
                        <li>单个日期分配</li>
                        <li>兼职人员主导分配</li>
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">
                            <div id="createPartForm" class="layui-form layui-form-pane">
                                <div class="layui-inline">
                                    <label class="layui-form-label">开始时间</label>
                                    <div class="layui-input-inline">
                                        <input type="text" readonly="readonly" name="startTime" id="startTime"
                                               placeholder="开始时间" autocomplete="off"
                                               value="${part.startTimeStr}" class="layui-input"/>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">结束时间</label>
                                    <div class="layui-input-inline">
                                        <input type="text" readonly="readonly" name="endTime" id="endTime"
                                               placeholder="结束时间" autocomplete="off"
                                               value="${part.endTimeStr}" class="layui-input"/>
                                    </div>
                                </div>

                                <div class="layui-inline">
                                    <label class="layui-form-label">薪资</label>
                                    <div class="layui-input-inline">
                                        <input type="number" name="salary" id="salary" placeholder="薪资"
                                               autocomplete="off"
                                               value="${part.salary}" class="layui-input"/>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">人数</label>
                                    <div class="layui-input-inline">
                                        <input type="number" name="peopleNumber" id="peopleNumber"
                                               placeholder="人数" autocomplete="off"
                                               value="${part.peopleNumber}" class="layui-input"/>
                                    </div>
                                </div>
                                <button class="layui-btn" id="btn_add_part">分配人员</button>
                            </div>
                            <div id="allocationPartUserContain" class="layui-row">
                                <div>
                                    <input type="text" value="1">
                                    <input type="text" value="2017-10-12"/>
                                    <label>-</label>
                                    <input type="text" value="2017-11-12"/>

                                    <label>x</label>
                                </div>
                            </div>


                        </div>
                        <div class="layui-tab-item">
                            <div id="calendarContainer"></div>
                        </div>
                        <div class="layui-tab-item">内容3</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<div id="addPartUserContainer" style="display: none">
    <div class="col-sm-12">
        <div class="show-top-grids">
            <div class="main-grids about-main-grids">
                <div class="recommended-info">
                    <hr class="layui-bg-green">
                    <form id="user_query_form" class="layui-form layui-form-pane" method="post"
                          action='<c:url value="/user/list"/>'>

                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">用户名</label>
                                <div class="layui-input-inline">
                                    <input type="text" id="userName" name="userName" placeholder="输入用户名"
                                           autocomplete="off"
                                           value="" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">电话</label>
                                <div class="layui-input-inline">
                                    <input type="text" id="phone" name="phone"
                                           placeholder="电话" autocomplete="off"
                                           value="" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">学校名称</label>
                                <div class="layui-input-inline">
                                    <input type="text" id="schoolName" name="schoolName"
                                           placeholder="学校名称" autocomplete="off"
                                           value="" class="layui-input">

                                </div>
                            </div>

                            <div class="layui-inline">
                                <label class="layui-form-label">性别</label>
                                <div class="layui-input-inline ">
                                    <select id="gender" name="gender" style="display: inline-block;"
                                            class="layui-input">
                                        <option value="">请选择</option>
                                        <option value="true">男</option>
                                        <option value="false">女</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">居住省</label>
                                <div class="layui-input-inline">
                                    <select id="currentProvince" name="currentProvince" tag="province"
                                            style="display: inline-block;"
                                            class="layui-input">
                                        <option value="">请选择</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">居住市</label>
                                <div class="layui-input-inline">
                                    <select id="currentCity" name="currentCity" tag="city"
                                            style="display: inline-block;"
                                            class="layui-input">
                                        <option value="">请选择</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">居住县</label>
                                <div class="layui-input-inline">
                                    <select id="currentTown" name="currentTown" tag="town"
                                            style="display: inline-block;"
                                            class="layui-input">
                                        <option value="">请选择</option>
                                    </select>

                                </div>
                            </div>

                            <div class="layui-inline">
                                <label class="layui-form-label">街道</label>
                                <div class="layui-input-inline ">
                                    <select id="currentRoad" name="currentRoad" style="display: inline-block;"
                                            class="layui-input">
                                        <option value="">请选择</option>
                                    </select>
                                </div>
                            </div>
                            <div style="display: none;">
                                <input type="hidden" name="black" value="0"/>
                            </div>
                        </div>
                    </form>

                    <div class="row bs-example" style="margin-top: 1em;">
                        <div class="form-group col-md-2">
                            <button class="layui-btn" id="query" type="button">查询</button>
                        </div>
                    </div>

                    <div class="about-grids" style="margin-top: 2em;">
                        <table id="example" class="layui-table" cellspacing="0" width="100%">
                            <thead>
                            <tr>
                                <th>
                                    <div id="allCheckDiv" class="layui-unselect layui-form-checkbox" lay-skin="primary">
                                        <span></span><i class="layui-icon"></i>
                                    </div>
                                    <input style="display: none;" type="checkbox" id="allCheck"/>
                                </th>
                                <th>用户名</th>
                                <th>电话</th>
                                <th>性别</th>
                                <th>身高</th>
                                <th>兼职类型</th>
                                <th>当前学历</th>
                                <th>当前生活地域</th>
                                <th>兼职时间</th>
                            </tr>
                            </thead>
                        </table>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <input type="hidden" id="recordTag"/>
</div>


</body>
<script type="text/javascript">

    Array.prototype.remove = function (val) {
        var index = this.indexOf(val);
        if (index > -1) {
            this.splice(index, 1);
        }
    };

    Array.prototype.add = function (val) {
        var index = this.indexOf(val);
        if (index == -1) {
            this.splice(0, 0, val);
        }
    };


    var table = null;
    var userList = [];

    $.extend($.fn.dataTable.defaults, {
        "language": {
            "lengthMenu": "每页 _MENU_ 条记录",
            "info": "第 _PAGE_ 页 ( 总共 _PAGES_ 页 )",
            "infoEmpty": "无记录",
            "infoFiltered": "(从 _MAX_ 条记录过滤)",
            paginate: {
                "first": "<<",
                "previous": "<",
                "next": ">",
                "last": ">>"
            },
            zeroRecords: "没有找到记录",
            emptyTable: '没有数据',
            loadingRecords: '加载中...',
            processing: '查询中...'
        },
        searching: false,
        ordering: false
    });

    //layui 的引用必须在最前面
    layui.use(['layer', 'laydate', 'element'], function () {
        window.layer = layui.layer;
        var laydate = layui.laydate,
            element = layui.element;
        laydate.render({
            elem: '#startTime',
            min: '${part.startTimeStr}',
            max: '${part.endTimeStr}'
        });
        laydate.render({
            elem: '#endTime',
            min: '${part.startTimeStr}',
            max: '${part.endTimeStr}'
        });
    });

    var $nav_a = $("#ul_nav a[href='/part/list']");
    $nav_a.parent().addClass("active");
    $nav_a.parent().parent().css("display", "block");

    var myCalendar = new SimpleCalendar('#calendarContainer',
        {
            width: "700px"
            , startTime: '${part.startTimeStr}'
            , endTime: '${part.endTimeStr}'
            , estimateNumber:${part.peopleNumber}
            , dateCallback: function (obj, This) {
            if (!$(obj).hasClass("sc-today-after")) {
                window.layer.msg("请选择有效日期", {icon: 5, anim: 6});
                return true;
            }
        }
        });


    $(function () {
        refreshDataTable();

        $("#allCheckDiv").click(function () {
            var che = $(this).next().prop("checked");
            $(this).next().prop("checked", !che);
            if (!che) {
                $(this).addClass("layui-form-checked");
            } else {
                $(this).removeClass("layui-form-checked");
            }


            $('#example tbody tr').each(function (o, i) {
                var $check = $("td:eq(0) input:first", this);
                var $showCheckDiv = $("td:eq(0) div:first", this);
                var userId = $check.val();
                if (!che) {
                    userList.add(userId);
                    $showCheckDiv.addClass("layui-form-checked");
                } else {
                    userList.remove(userId);
                    $showCheckDiv.removeClass("layui-form-checked");
                }
                console.info(userList);
                $check.prop("checked", !che);
            });

        });

        $('#example tbody').on('click', 'tr', function () {
            table.row(this)
        });


        $("#btn_add_part").click(function () {
            var choosePartUserDialog = window.layer.open({
                type: 1
                , area: ['1500px']
                , content: $('#addPartUserContainer')
                , btn: ['添加']
                , yes: function (index, layero) {
                    window.layer.close(index);
                }
            })
        });

        $("#query").click(function () {
            table.draw();
        });
        initSelect("currentProvince");

        $("#currentProvince").change(function () {
            initSelect("currentCity", $(this).val());
        });
        $("#currentCity").change(function () {
            initSelect("currentTown", $(this).val());
        });
        $("#currentTown").change(function () {
            initArea("currentRoad", $(this).val());
        });
    });

    function refreshDataTable() {
        table = $('#example').DataTable({
            pagingType: "full_numbers",
            bLengthChange: false,
            processing: true,
            serverSide: true,
            ajax: {
                url: '<c:url value="/user/query"/>',
                type: "POST",
                data: function (d) {
                    $.extend(d, $("#user_query_form").serializeObject());
                }
            },
            columns: [
                {
                    "data": "id"
                    , render: function (data, type, row, meta) {
                    return "<div class=\"layui-unselect layui-form-checkbox\"  lay-skin=\"primary\">"
                        + "<span></span><i class=\"layui-icon\"></i></div>" +
                        "<input type='checkbox' style='display: none;' name='checklist' value='" + row.id + "' />";
                }
                },
                {"data": "userName"},
                {"data": "phone"},
                {
                    data: "gender",
                    render: function (data, type, row, meta) {
                        if (data == true)return "男";
                        else return "女";
                    }
                },
                {
                    data: "stature",
                    render: function (data, type, row, meta) {
                        return data + "cm";
                    }
                },
                {
                    data: "postType",
                    render: function (data, type, row, meta) {
                        if (data == 1)return "兼职";
                        else return "全职";
                    }
                },
                {
                    data: "educationalBackground",
                    render: function (data, type, row, meta) {
                        if (data == "1")return "高中";
                        else if (data == "2") return "大专";
                        else if (data == "3") return "本科";
                        else if (data == "4") return "硕士";
                        else if (data == "5") return "博士";
                        else if (data == "6") return "其他";
                    }
                },
                {
                    data: "currentProvince",
                    render: function (data, type, row, meta) {
                        return row.currentProvince + "-" + row.currentCity + "-" + row.currentTown;
                    }
                },
                {
                    data: "schedules",
                    render: function (data, type, row, meta) {
                        return data;
                    }
                }
            ]
        });

        $('#example tbody').on('click', 'tr', function () {
            var $check = $("td:eq(0) input:first", this);
            var $showCheckDiv = $("td:eq(0) div:first", this);
            var isChecked = $check.prop("checked");
            var userId = $check.val();
            if (!isChecked) {
                userList.add(userId);
                $showCheckDiv.addClass("layui-form-checked");
            } else {
                userList.remove(userId);
                $showCheckDiv.removeClass("layui-form-checked");
            }
            console.info(userList);
            $check.prop("checked", !isChecked);

        });
    }


    function initSelect(name, parentCode) {
        var container = $("#" + name);
        $(container).empty();
        var tag = $(container).attr("tag");
        $(container).append("<option value=''>请选择</option>");
        $.ajax({
            url: '/static/json/list.json'
            , type: 'GET'
            , dataType: "json"
            , success: function (data) {
                for (var code in data) {
                    if (tag == "province" && code % 1e4 == 0) {
                        $(container).append("<option value='" + code + "'>" + data[code] + "</option>");
                    } else if (tag == "city" && code % 1e2 == 0) {
                        var preCode = parseInt(code / 1e4);
                        var preParentCode = parseInt(parentCode / 1e4);


                        if (preCode == preParentCode) {
                            if (code != parentCode || ["50", "31", "11", "12"].indexOf(preCode + "") > -1) {
                                $(container).append("<option value='" + code + "'>" + data[code] + "</option>");
                            }
                        }
                    } else if (tag == "town") {
                        if (code % 1e2 != 0) {
                            var preCode = parseInt(code / 1e2);
                            var preParentCode = parseInt(parentCode / 1e2);
                            if (preCode == preParentCode) {
                                $(container).append("<option value='" + code + "'>" + data[code] + "</option>");
                            } else {
                                if (parseInt(preCode / 10) == parseInt(preParentCode / 10)) {
                                    $(container).append("<option value='" + code + "'>" + data[code] + "</option>");
                                }
                            }
                        }
                    }

                }
            }
        });
    }

    function initArea(name, code) {
        var container = $("#" + name);
        $(container).empty();
        $(container).append("<option value=''>请选择</option>");
        if (code == "") {
            return true;
        }
        var url = "/static/json/town/" + code + ".json";
        $.ajax({
            url: url
            , type: 'GET'
            , dataType: "json"
            , success: function (data) {
                for (var code in data) {
                    $(container).append("<option value='" + code + "'>" + data[code] + "</option>");
                }
                $(container).append("<option value='999999'>其他</option>");
            }
        });
    }

</script>

</html>
